﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxSplitter Fluid Size Example. The width and height of the Splitter in this demo are in Percentages.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <style>
        html, body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#splitter').jqxSplitter({
                width: '80%',
                height: '80%',
                orientation: 'vertical',
                panels: [
                   { size: "50%", min: "10%", collapsible: false },
                   { size: '50%', min: "5%"}]
            });
       
            $('#nested2').jqxSplitter({ width: "100%", height: "100%", panels: [
                { size: 200}]
            });
            $('#nested1').jqxSplitter({ orientation: 'horizontal', width: "100%", height: "100%", panels: [
                { size: "60%"}]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="DIV1" style="width: 100%; height: 100%;">
        <div id="splitter">
            <div>
                <div id="nested2">
                    <div>
                        Nested 2.1</div>
                    <div>
                        Nested 2.2</div>
                </div>
            </div>
            <div>
                <div id="nested1">
                    <div>
                        Nested 1.1</div>
                    <div>
                        Nested 1.2</div>
                </div>
            </div>
    </div>
    </div>
</body>
</html>
